<template>
	<div class="boxStyle">
		<el-row type="flex" class="row-bg" justify="start" style="margin-bottom: 10px;">
			<el-col :span="1" style="margin-top: 5px;padding-left: 0px;">订单号:</el-col>
			<el-col :span="2" style="margin-right: 10px;">
				<el-input v-model="orderId" placeholder="" size="small"></el-input>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;padding-left: 15px;width: 100px;">订单状态:</el-col>
			<el-col :span="2">
				<el-select v-model="status" placeholder="请选择" size="small" style="width: 100px;">
					<el-option value="" label="全部"></el-option>
					<el-option key="1" label="待支付" value="1"></el-option>
					<el-option key="2" label="已支付" value="2"></el-option>
					<el-option key="3" label="已关闭" value="3"></el-option>
					<el-option key="4" label="退款中" value="4"></el-option>
					<el-option key="5" label="已退款" value="5"></el-option>
				</el-select>
			</el-col>
			<el-col :span="2" style="margin-top: 5px;margin-left:30px;">申请时间:</el-col>
			<el-col :span="6" style="margin-top: -3px;">
				<el-date-picker v-model="stime" type="datetimerange" range-separator="至 " start-placeholder="开始时间" end-placeholder="结束时间"></el-date-picker>
			</el-col>
			<el-col :span="1" style="margin-left:80px;">
				<el-button type="warning" icon="el-icon-search" size="small" @click="search">查找</el-button>
			</el-col>
		</el-row>
		<el-table :data="tableData" border style="width:100%;margin-bottom: 10px;" @selection-change="handleSelectionChange">
			<el-tableref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%">
				<el-table-column type="selection" width="50"></el-table-column>
				<el-table-column prop="payType" label="支付渠道" width="100">
					<template slot-scope="scope">
						<label v-if="scope.row.payType!=1">微信</label>
						<label v-if="scope.row.payType==1">支付宝</label>
					</template>
				</el-table-column>
				<el-table-column prop="outTradeNo" label="订单编号" width="200"></el-table-column>
				<el-table-column prop="nickName" label="用户账号" width="140"></el-table-column>
				<el-table-column prop="applyTime" label="申请时间" width="160" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="dealTime" label="处理时间" width="160" :formatter="dateFormat"></el-table-column>
				<el-table-column prop="transactionId" label="交易单号"></el-table-column>
				<el-table-column prop="totalFee" label="总金额" width="100">
					<template slot-scope="scope">
						<span>{{scope.row.totalFee/100}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="status" label="订单状态" width="100">
					<template slot-scope="scope">
						<label v-if="scope.row.status==1">待支付</label>
						<label v-if="scope.row.status==2">已支付</label>
						<label v-if="scope.row.status==3">已关闭</label>
						<label v-if="scope.row.status==4">退款中</label>
						<label v-if="scope.row.status==5">已退款</label>
					</template>
				</el-table-column>
				<el-table-column prop="refundFee" label="退款金额" width="100">
					<template slot-scope="scope">
						<span>{{scope.row.refundFee/100}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="交易时间" :formatter="dateFormat" width="160"></el-table-column>
				<el-table-column label="操作"  min-width="120">
					<template slot-scope="scope">
						<el-button v-if="scope.row.status==4&&refund!==-1" size="mini" type="primary" @click="refunddetermine(scope.row.outTradeNo,1)">确认退款</el-button>
						<el-button v-if="scope.row.status==4&&refundcaShow!==-1" size="mini" type="primary" style="margin-top: 5px;margin-left:0px;" @click="refundca(scope.row.outTradeNo,0)">取消退款</el-button>
					</template>
				</el-table-column>
		</el-table>
		<el-pagination background @current-change="handleCurrentChange" :current-page="Page" :page-size="size" layout="prev, pager, next,total, slot" :total="totals">
			<span style="margin-top: -2px;color: #606266;font-weight: 100;">第<el-input type="text" v-model="inputPage" style="width: 60px;margin: 0 5px;"/>页<el-button size="mini" style="background: #409EFF; color: #fff;margin:0 5px;" @click="handleCurrentChange(inputPage)">跳转</el-button><span>总计{{totalPage}}页</span></span>
		</el-pagination>
	</div>
</template>

<script>
	import { formatDate } from 'static/js/date.js'
	import qs from "qs"
	import axios from "axios"
	export default {
		data() {
			return {
				Page: 1, //当前页
				totals: 0, //分页总条数
				size: 0, //每页条数
				inputPage: 1,
				totalPage: 1,
				purl: this.$store.state.purl, //权限数组
				stime: [], //搜索时间段
				seleAll: "全部",
				tableData: [],
				orderType: "", //搜索订单类型
				status: "", //搜索订单状态
				orderId: "", //搜索订单编号
				isDisabled: false,
				refund:0,
				refundcaShow:0,
				stime:[],
			}
		},
		activated() {
			this.Page = 1
			this.totals = 0
			this.size = 0
			this.inputPage = 1
			this.totalPage = 1
			this.purl = this.$store.state.purl
			this.stime = []
			this.seleAll = "全部"
			this.tableData = []
			this.orderType = ""
			this.status ="";
			this.orderId= ""
			this.isDisabled = false
			this.load(1);
			this.refund = this.purl[0].findIndex((val) => val === "/interface/orderpays/examine")
			this.refundcaShow = this.purl[0].findIndex((val) => val === "/interface/orderpays/examine")
		},
		methods: {
			load(num) {
				axios.get("/interface/orderpays/list?pageNo=" + num).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage;
				})
			},
			dateFormat: function(row, column) {
				var date
				if(row[column.property]) {
					date = new Date(parseInt(row[column.property]))
					date = formatDate(date, 'yyyy-MM-dd hh:mm:ss')
				}
				if(date == undefined) {
					return "";
				}
				return date;
			},
			handleCurrentChange(val) {
				var thit = this;
				thit.Page = val-0
				thit.inputPage = val-0;
				var startTime
				var endTime
				if(this.stime!=null&&this.stime.length>0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/orderpays/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					status:this.status,
					pageNo: val
				})).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage;
				})
			},
			search() {
				var startTime
				var endTime
				if(this.stime!=null&&this.stime.length>0) {
					startTime = formatDate(this.stime[0], 'yyyy-MM-dd hh:mm:ss');
					endTime = formatDate(this.stime[1], 'yyyy-MM-dd hh:mm:ss');
				} else {
					startTime = "";
					endTime = "";
				}
				axios.post("/interface/orderpays/list?", qs.stringify({
					stime: startTime,
					etime: endTime,
					orderId: this.orderId,
					status:this.status,
					pageNo:this.Page
				})).then((res) => {
					this.tableData = res.data.data.list;
					this.totals = res.data.data.pageBean.totalRow; //总条数
					this.size = res.data.data.pageBean.pageSize; //每页条数
					this.totalPage = res.data.data.pageBean.totalPage;
				})
			},
			handleSelectionChange() {

			},
			refunddetermine(outTradeNo,refundFee) {
				this.$confirm('是否确认退款?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post("/interface/orderpays/examine?", qs.stringify({
						orderId: outTradeNo,
						status: refundFee
					})).then((res) => {
						var msg = res.data;
						if(msg.code == 1) {
							this.$message({
								message: '退款成功',
								type: 'success'
							});
							this.load(1);
						} else {
							this.$notify.error({
								title: '错误',
								message: msg.msg
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});

			},
			refundca(outTradeNo,refundFee) {
				this.$confirm('是否取消退款?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					axios.post("/interface/orderpays/examine?", qs.stringify({
						orderId: outTradeNo,
						status: refundFee
					})).then((res) => {
						var msg = res.data;
						if(msg.code == 1) {
							this.$message({
								message: '取消退款成功',
								type: 'success'
							});
							this.load(1);
						} else {
							this.$notify.error({
								title: '错误',
								message: msg.msg
							});
						}
					})
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消'
					});
				});

			},
		}
	}
</script>

<style>

</style>